<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:s="http://www.springframework.org/tags/faces"
	template="/WEB-INF/layouts/standard.xhtml">

	<ui:param name="pageTitle" value="Confirm Seats and Check In"/>
	<ui:param name="pageClass" value="wizard"/>

	<ui:define name="content">

		<ui:include src="/WEB-INF/layouts/steps.xhtml">
			<ui:param name="step" value="3"/>
		</ui:include>

		<br/>

		<h1>Confirm seats and check in</h1>

		<h:form id="boardingPassesForm">
			<f:facet name="header">Available flights for check in</f:facet>
			<h2>#{reservation.origin.name} - #{reservation.destination.name} (#{reservation.itineraryType.label})</h2>
			<h:dataTable id="boardingPasses" var="_boardingPass" value="#{boardingPasses}" styleClass="summary">
				<h:column>
					<f:facet name="header">Passengers</f:facet>
					#{_boardingPass.ticket.passenger.name}
				</h:column>
				<h:column>
					<f:facet name="header">Flight number</f:facet>
					#{_boardingPass.flightSegment.flight.airline.name}
					#{_boardingPass.flightSegment.flight.airline.code}-#{_boardingPass.flightSegment.flight.number}
				</h:column>
				<h:column>
					<f:facet name="header">Departure date</f:facet>
					<h:outputText value="#{_boardingPass.flightSegment.flight.departureTime}">
						<f:convertDateTime type="both" dateStyle="medium" timeStyle="short"/>
					</h:outputText>
				</h:column>
				<h:column>
					<f:facet name="header">Check-in status</f:facet>
					#{_boardingPass.checkedIn ? 'Checked-in' : 'Not checked-in'}
				</h:column>
				<h:column>
					<f:facet name="header">Seating</f:facet>
					<span style="float: left; display: block; line-height: 2em; vertical-align: middle;">#{_boardingPass.seat.number}</span>
					<s:commandButton id="viewOrChangeSeat" action="viewOrChangeSeat" value="View or change" style="float: right; margin: 2px 0;" processIds="*"/>
				</h:column>
			</h:dataTable>

			<div class="advanceButtons">
				<h:commandButton action="cancel" immediate="true" value="Cancel"/>
				#{' '}
				<h:commandButton action="continue" value="Continue"/>
			</div>
		</h:form>

		<h:panelGroup id="seatingChart">
			<h:form id="seatingChartForm" rendered="#{not empty boardingPasses.selectedRow}">
				<h2>Seating chart</h2>
				<p><em>Select or change the seat for #{boardingPasses.selectedRow.ticket.passenger.name}.</em></p>
				<h:dataTable id="seatsByRow" var="_row" value="#{seatMatrix.rows}">
					<h:column id="seatsInRow">
						<div style="text-align: center;">
							<ui:repeat var="_seatSelection" value="#{_row.seatSelections}">
								#{' '}
								<s:commandLink id="change" action="change" actionListener="#{seatMatrix.select}"
									rendered="#{_seatSelection.available}" processIds="*"><h:graphicImage
									value="/resources/images/available-seat.png" alt="available seat" style="border: none; vertical-align: middle;"/></s:commandLink>
								<h:graphicImage value="/resources/images/#{_seatSelection.status.key}-seat.png" rendered="#{not _seatSelection.available}" style="vertical-align: middle;"
									alt="#{_seatSelection.status.key} seat"/>
								<span><h:outputText value="#{_seatSelection.seat.number}" style="font-size: 0.8em;"/></span>
								#{' '}
							</ui:repeat>
						</div>
					</h:column>
				</h:dataTable>
				<table border="1" cellspacing="0" cellpadding="3">
					<caption style="text-align: left;">Legend</caption>
					<tr>
						<td style="text-align: center;"><h:graphicImage value="/resources/images/available-seat.png" alt="available seat"/></td>
						<td style="text-align: center;"><h:graphicImage value="/resources/images/self-seat.png" alt="self seat"/></td>
						<td style="text-align: center;"><h:graphicImage value="/resources/images/group-seat.png" alt="group seat"/></td>
						<td style="text-align: center;"><h:graphicImage value="/resources/images/unavailable-seat.png" alt="unavailable seat"/></td>
					</tr>
					<tr>
						<td style="text-align: center;">Available</td>
						<td style="text-align: center;">Selected</td>
						<td style="text-align: center;">Companion</td>
						<td style="text-align: center;">Unavailable</td>
					</tr>
				</table>
				<div class="buttonGroup">
					<s:commandButton id="done" action="done" immediate="true" value="Done"/>
				</div>
			</h:form>
		</h:panelGroup>

	</ui:define>

</ui:composition>
